<template>
  <div style="padding-top:200px">
    <div class="login">
      <h2>一个简洁的登录</h2>
      <div class="login_box">
        <input type="text" v-model="account.username" required />
        <label for="name">用户名<span v-if="!account.username">(请输入账号)</span></label>
      </div>

      <div class="login_box">
        <input type="password" v-model="account.password" required="required">
        <label for="pwd">密码 <span v-if="!account.password">(请输入密码)</span></label>
      </div>
      <div>
        <a href="javascript:void(0)" @click="submit">
          登录
          <span></span>
          <span></span>
          <span></span>
          <span></span>
        </a>
        <a href="javascript:void(0)" @click="register">
          注册
          <span></span>
          <span></span>
          <span></span>
          <span></span>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, getCurrentInstance, ref } from "vue";
import { useRouter } from "vue-router";

export default {
  setup() {
    let list = ref([]);
    const { proxy } = getCurrentInstance();
    const router = useRouter();
    const account = reactive({
      username: "",
      password: "",
    });

    const submit = () => {
      const { username, password } = account;
      if (!username || !password) return
      //       proxy.$http({
      //     url: "/login/code",
      //     method: "get",
      //   })
      //   .then(({ data }) => {
      //     console.log(data,'data返回的数字')
      //   })
      //   .catch((e) => {
      //     console.log(e, "e");
      // });
      // return
      proxy
        .$http({
          url: "/login/login",
          method: "post",
          data: {
            username,
            password,
          },
        })
        .then(({ data }) => {
          if (data.token) {
            proxy.$util.setSession(data.token, "token");
            router.push({ name: "home" });
          }
        })
        .catch((e) => {
          console.log(e, "e");
        });
    };
    const register = () => {
      alert('还没开发呢！')
    }
    return {
      submit,
      account,
      list,
      register
    };
  },
};
</script>

<style lang="scss">
.login {
  padding-top: 200px;
  margin: auto;
  /*弹性布局 让子元素称为弹性项目*/
  display: flex;
  /*让弹性项目垂直排列  原理是改变弹性盒子的主轴方向  
	父元素就是弹性盒子  现在改变后的主轴方向是向下了*/
  flex-direction: column;
  /*让弹性项目在交叉轴方向水平居中  现在主轴的方向是向下  
	交叉轴的方向是与主轴垂直 交叉轴的方向是向右*/
  align-items: center;
  width: 400px;
  padding: 40px;
  background-color: rgba(0, 0, 0, 0.2);
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.4);

}

.login h2 {
  color: #fff;
  margin-bottom: 30px;
}

.login .login_box {
  /*相对定位*/
  position: relative;
  width: 100%;
}

.login .login_box input {
  /*清除input框自带的边框和轮廓*/
  outline: none;
  border: none;
  width: 100%;
  padding: 10px 0;
  margin-bottom: 30px;
  color: #fff;
  font-size: 16px;
  border-bottom: 1px solid #fff;
  /*背景颜色为透明色*/
  background-color: transparent;
}

.login .login_box label {
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px 0;
  color: #fff;
  /*这个属性的默认值是auto 默认是这个元素可以被点击
	但是如果我们写了none  就是这个元素不能被点击，就好像它可见但是不能用  
	可望而不可及*/
  /*这个就是两者的区别*/
  pointer-events: none;
  /*加个过度*/
  transition: all 0.5s;
}

/*: focus 选择器是当input获得焦点是触发的样式 + 是相邻兄弟选择器
	去找与input相邻的兄弟label*/
/*：valid 选择器是判断input 框的内容是否合法，如果合法会执行下面的属性代码，
	不合法就不会执行，我们刚开始写布局的时候给input框写了required 我们删掉看对比 
	当没有required的话   input框的值就会被认为一直合法，所以一直都是下方的样式，
	但是密码不会，密码框的值为空，那么这句话就不合法，required不能为空
	当我们给密码框写点东西的时候才会执行以下代码

*/
.login .login_box input:focus+label,
.login .login_box input:valid+label {
  top: -30px;
  color: #03e9f4;
  font-size: 12px;
}

.login a {
  /*overflow: hidden;*/
  position: relative;
  padding: 10px 20px;
  color: #03e9f4;
  /*取消a表现原有的下划线*/
  text-decoration: none;
  /*同样加个过渡*/
  transition: all 0.5s;
}

.login a:hover {
  color: #fff;
  border-radius: 5px;
  background-color: #03e9f4;
  box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4, 0 0 100px #03e9f4;
}

.login a span {
  position: absolute;
}

.login a span:first-child {
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  /*to right 就是往右边 下面的同理*/
  background: linear-gradient(to right, transparent, #03e9f4);
  /*动画 名称  时长 linear是匀速运动 infinite是无限次运动*/
  animation: move1 1s linear infinite;

}

.login a span:nth-child(2) {
  right: 0;
  top: -100%;
  width: 2px;
  height: 100%;
  background: linear-gradient(transparent, #03e6f4);
  /*这里多了个0.25s其实是延迟时间*/
  animation: move2 1s linear 0.25s infinite;
}

.login a span:nth-child(3) {
  right: -100%;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to left, transparent, #03e9f4);

  animation: move3 1s linear 0.5s infinite;
}

.login a span:last-child {
  left: 0;
  bottom: -100%;
  width: 2px;
  height: 100%;
  background: linear-gradient(#03e9f4, transparent);
  animation: move4 1s linear 0.75s infinite;
}

/*写一下动画 */
@keyframes move1 {
  0% {
    left: -100%;

  }

  50%,
  100% {
    left: 100%;
  }
}

@keyframes move2 {
  0% {
    top: -100%;

  }

  50%,
  100% {
    top: 100%;
  }
}

@keyframes move3 {
  0% {
    right: -100%;

  }

  50%,
  100% {
    right: 100%;
  }
}

@keyframes move4 {
  0% {
    bottom: -100%;

  }

  50%,
  100% {
    bottom: 100%;
  }
}

// .box {
//   margin-top: 20px;
//   background-color: #fff;
// }

// .login {
//   width: 100%;
//   height: 100%;
//   background-size: cover;
//   background-color: #ccc;

//   .team-name {
//     position: fixed;
//     left: 40px;
//     top: 50%;
//     width: 50px;
//     transform: translateY(-50%);
//   }

//   .form-box {
//     position: fixed;
//     left: 50%;
//     top: 50%;
//     transform: translate(-50%, -50%);
//     width: 445px;

//     .title {
//       height: 37px;
//       font-size: 30px;
//       line-height: 37px;
//       margin-bottom: 15%;

//       h1 {
//         padding-left: 74px;
//         box-sizing: border-box;
//         text-align: left;
//         color: #8c98ae;
//       }
//     }

//     .login-form {
//       width: 100%;

//       .form-item {
//         position: relative;
//         width: 100%;
//         height: 40px;
//         box-sizing: border-box;
//         padding-bottom: 13px;
//         margin-bottom: 34px;

//         input {
//           width: 100%;
//           height: 100%;
//           background: transparent;
//           color: #c4c9d2;
//           font-size: 14px;
//           padding-left: 74px;
//           box-sizing: border-box;
//         }
//         .captcha {
//           position: absolute;
//           width: 80px;
//           right: 30px;
//           top: -22px;
//           cursor: pointer;
//         }
//       }
//       .form-item.nickname {
//         background-size: 100% auto;
//         background-position: left bottom;
//       }
//       .form-item.password {
//         background-size: 100% auto;
//         background-position: left bottom;
//       }

//       .submit-btn {
//         width: 100%;
//         height: 70px;
//         color: #c4c9d2;
//         font-size: 16px;
//         text-align: left;
//         box-sizing: border-box;
//         padding: 0 10px;
//         padding-left: 74px;
//         background-size: 90% auto;
//         background-position: center bottom;
//         border: none;
//         cursor: pointer;
//       }
//     }
//   }
// }
</style>
